Skip to content

chore(lint): add eslint and prettier with ionic configs and CI workflow - #183

Open
brandyscarney wants to merge 10 commits into
mainfrom
chore/add-lint-workflow
Open

brandyscarney wants to merge 10 commits into
mainfrom
chore/add-lint-workflow

Conversation

@brandyscarney

@brandyscarney brandyscarney commented Oct 23, 2026 •

Copy link
Copy Markdown
Member

What This Does

Adds linting and formatting to the React conference app using Ionic's shared ESLint and Prettier configs, and adds a CI workflow on Node 26 that checks every pull request.

New Behavior

  • npm run lint checks the code with ESLint, then Prettier. npm run lint:fix fixes what it can automatically.
  • Every pull request runs a Lint job on Linux, plus Test on macOS-latest and Test on windows-latest jobs that build the app.
  • CI runs on Node 26, the current LTS, read from .nvmrc. nvm use (or fnm) picks it up locally.
  • Pushing a new commit to a pull request cancels its CI run that's still in progress.
  • VS Code suggests the ESLint, Prettier, and Webnative extensions.

Changes

  • ESLint 10 with @ionic/eslint-config (recommended) plus eslint-plugin-react-hooks and eslint-plugin-react-refresh. The repo had no ESLint installed, only a leftover react-app config in package.json, which is removed.
  • Prettier 2 → 3 with @ionic/prettier-config, replacing .prettierrc and the format script. The source is reformatted, and the remaining lint errors are fixed.
  • Imports are sorted to Ionic's import-x/order rule. Each page's stylesheet import comes last, and App.tsx imports its global CSS first, so page styles still load after Ionic's CSS.
  • Scripts: lint, lint:fix, eslint, and prettier
  • .github/workflows/CI.yml, with a concurrency group per pull request and the Test jobs named by OS only, so Node updates don't rename the required checks.
  • Adds .nvmrc with 26. Every actions/setup-node step reads it, in CI.yml and capacitor-sync.yml.
  • renovate.json: @ionic/eslint-config and @ionic/prettier-config move out of the ionic group and into the dev-tools group, along with ESLint and its plugins
  • .vscode/extensions.json
  • .prettierignore for android/ and ios/: Prettier only reads the root .gitignore, so it would otherwise check Capacitor's copied web build and Gradle's build output
  • A line about linting in the Code Style section of CONTRIBUTING.md

Notes

  • @typescript-eslint/explicit-module-boundary-types is set to warn here (the level in Ionic's base config). The next PR fixes those warnings and makes the rule an error again.
  • A few rules are off for patterns used throughout the app, with a comment on each: react-refresh/only-export-components (pages export a connect()-wrapped default), no-empty-object-type, and no-unused-expressions.
  • Sorting the imports keeps the same CSS rules but changes their order a little: Menu.css now loads after Ionic's CSS like the other components, and a few page stylesheets swap places. None of the reordered rules set the same property on the same element, so nothing renders differently.
  • react-refresh/only-export-components stays on, configured to recognize the custom connect() HOC that pages are wrapped in. AppContext is split into AppContext.ts (the context) and AppContextProvider.tsx (the provider component), so every file exports only components or only non-components.
  • The package is an ES module ("type": "module"), like the React tutorial app, so the config is eslint.config.js, and Vite no longer warns about loading vite.config.ts as CommonJS.
  • Lint runs on Linux only: Windows runners check out with CRLF line endings, which Prettier would report as formatting changes.
  • When setting up required status checks, the Test jobs are "Test on macOS-latest" and "Test on windows-latest".
  • Matches the lint and CI setup in the React tutorial app.

@brandyscarney
brandyscarney requested a review from a team as a code owner October 23, 2026 16:00
@brandyscarney
brandyscarney requested review from ShaneK and removed request for a team October 23, 2026 16:00
@vercel

vercel Bot commented Oct 23, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
ionic-react-conference-app Ready Ready Preview Nov 11, 2026 9:43pm UTC

Request Review

This branch was successfully deployed

1 active deployment
Preview — 62166b8d Deployed Nov 11, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant